<template>
    <div class="edu-page-warp">
        <InnerBreadcrumb v-model="pageIndex" :path="breadPath"></InnerBreadcrumb>
        <div v-if="pageIndex === 1">
            <el-card shadow="never" style="margin-top: 15px">
                <h2 slot="header" style="font-weight: bold">我的公告</h2>
                <edu-table
                    :order="false"
                    :selection="false"
                    ref="myInformationTable"
                    :data="myInformationList"
                    :total="queryParams.total"
                    :page-num="queryParams.pageNum_"
                    :pageSize="queryParams.pageSize_"
                    @page-change="onCurrentPageChange"
                >
                    <edu-table-column label="信息标题" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-button type="text" @click="noticeDetails(scope.row.id)">
                                {{ scope.row.title }}
                            </el-button>
                        </template>
                    </edu-table-column>
                    <edu-table-column label="发布日期" prop="publishTime" />
                    <edu-table-column :label="$t('message.operating')">
                        <template slot-scope="scope">
                            <el-button type="text" @click="viewInformation(scope.row.id)">
                                查看明细
                            </el-button>
                        </template>
                    </edu-table-column>
                </edu-table>
            </el-card>
        </div>
        <!-- 系统公告详情 -->
        <edu-dialog
            width="1000px"
            class="systemDialog"
            @confirm="confirmMsg"
            confirmBtnText="确定"
            :isCustomTitle="true"
            :showCancelBtn="false"
            :autoHeight="false"
            v-if="showDetail"
            :visible.sync="showDetail"
        >
            <span slot="title">
                <img class="title-img" src="/static/images/icon/icon_title.png" />
                <span class="title-span">{{ systemNoticeDetails.title }}</span>
            </span>
            <div class="info">
                <div class="info-date">
                    {{ $t('workbench.releaseDate') }}{{ systemNoticeDetails.publishTime }}
                </div>
                <div class="info-content" v-html="systemNoticeDetails.content"></div>
                <div class="info-attach">
                    <div
                        v-for="(attach, index) in systemNoticeDetails.commonAttachmentList"
                        :key="index"
                    >
                        <div
                            class="attach-item"
                            v-if="attach.fileName"
                            @click="handleDownloadfile(attach.fileLacation, attach.fileName)"
                        >
                            <i class="el-icon-document"></i>
                            <span class="attach-name">{{ attach.fileName }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </edu-dialog>
        <!-- 公告详情 -->
        <information-management
            mode="view"
            :infoId="infoId"
            :hideStatus="1"
            v-if="pageIndex === 2"
            @backToList="backToList"
        ></information-management>
    </div>
</template>

<script>
import { downloadfile } from "common/src/api/upload"
import { getPublicMsgDetail } from 'common/src/api/public/information'
import { findMyCommonMsgPublish } from 'common/src/api/public/information'
import InformationManagement from './informationManagement'

export default {
    name: 'myInformation',
    components: {
        InformationManagement,
    },
    data() {
        return {
            pageIndex: 1, //1：我的公告列表页；2：公告详情页
            breadPath: {
                label: '我的公告',
                key: 1,
                children: [
                    {
                        key: 2,
                        label: '',
                    },
                ],
            },
            infoId: '',
            myInformationList: [], //列表数据
            queryParams: {
                title: '',
                status: '',
                total: 0,
                pageNum_: 1,
                pageSize_: 20,
            },
            information: {},
            showDetail: false,
            systemNoticeDetails: '', // 公告详情、
            options: {
                infomationStatusList: [
                    {
                        key: 1,
                        label: '草稿',
                        value: 1,
                    },
                    {
                        key: 2,
                        label: '审核中',
                        value: 2,
                    },
                    {
                        key: 3,
                        label: '已发布',
                        value: 3,
                    },
                ],
            },
        }
    },
    watch: {
        pageIndex(val) {
            if (val === 1) {
                document.getElementsByClassName('el-main')[0].scrollTop = 0
                this.queryParams.pageNum_ = 1
                this.queryNoticsList()
            }
        },
    },
    mounted() {
        this.queryNoticsList()
    },
    methods: {
        // 系统公告详情
        noticeDetails(id) {
            getPublicMsgDetail(id).then((res) => {
                this.systemNoticeDetails = res.data
                this.systemNoticeDetails.startTime = this.formatTime(
                    this.systemNoticeDetails.startTime
                )
                // 显示查看信息
                this.showDetail = true
            })
        },
        formatTime(date) {
            return date.slice(0, 10).replace(/-/g, '/')
        },
        confirmMsg() {
            this.showDetail = false
        },
        // 处理下载文件
        handleDownloadfile(objectkey, filename) {
            if (!objectkey) return
            downloadfile(filename ? objectkey + `&realName=${filename}` : objectkey)
        },
        reset() {
            this.queryParams.title = ''
            this.queryParams.status = ''
            this.queryNoticsList()
        },
        async queryNoticsList() {
            let { code, data } = await findMyCommonMsgPublish(this.queryParams)
            if (code !== 200) return
            this.myInformationList = data.list.map((item) => {
                item.publishTime = this.formatTime(item.publishTime)
                return item
            })
            this.queryParams.pageNum_ = data.pageNum_
            this.queryParams.pageSize_ = data.pageSize_
            this.queryParams.total = data.total_
        },
        formatTime(time) {
            return time.slice(0, 10).replace(/-/g, '/')
        },
        viewInformation(id) {
            this.infoId = id
            this.pageIndex = 2
            this.breadPath.children[0].label = `公告详情`
        },
        onCurrentPageChange(pager) {
            this.queryParams.pageSize_ = pager.pageSize
            this.queryParams.pageNum_ = pager.pageNum
            this.queryNoticsList()
        },
        backToList() {
            this.pageIndex = 1
        },
    },
}
</script>

<style lang="scss" scoped>
</style>
